ひとりNavigation API Advent Calendar 23日目
https://gyazo.com/56c1f68c32b26e881a575fe5456d0171
従来のブラウザはSPAの画面遷移を「ナビゲーション」と認識できず、パフォーマンス計測が困難だった問題がある それを解決するために提案されているもの
ユーザー操作（クリック・キーボードなど）に起因するタスクの子孫であること
これらを総合して「ユーザー操作による画面遷移」と推定する 以下の仕組みを使う
現在Stage 2とのこと
Chrome.icon chrome://flags/#soft-navigation-heuristicsフラグで使用解除
Microsoft Edge.icon edge://flags/#soft-navigation-heuristicsフラグで使用解除
計測方法
SoftNavigationEntryを監視して、「いつソフトナビゲーションが発生したか」を取得する
code:js
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout Shift time:', entry);
}
}).observe({type: 'layout-shift', buffered: true, includeSoftNavigationObservations: true});
https://gyazo.com/e43559491b9053462fd1ba70d0c18106
ページロード後に、すでに発生したSoftNavigationEntryを取得する
code:js
const softNavs = performance.getEntriesByType("soft-navigation");
SoftNavigationEntry、InteractionContentfulPaintを関連付けて、「そのナビゲーションに対するLCP相当の時間」を計算する例 code:js
const softNavs = [];
const observer = new PerformanceObserver((list) => {
// Soft Navigation の記録
for (const navEntry of list.getEntriesByType("soft-navigation")) {
softNavs.push(navEntry);
}
// Interaction Contentful Paint の処理
for (const icpEntry of list.getEntriesByType("interaction-contentful-paint")) {
const navEntry = softNavs.find(
(nav) => nav.navigationId === icpEntry.navigationId
);
if (navEntry) {
const relative = icpEntry.startTime - navEntry.startTime;
console.log("Soft Navigation LCP-like timing:", relative);
}
}
});
observer.observe({
type: "soft-navigation",
includeSoftNavigationObservations: true,
buffered: true,
});
observer.observe({
type: "interaction-contentful-paint",
includeSoftNavigationObservations: true,
buffered: true,
});
結論としてはNO
Navigation APIは、同一ドキュメント内の履歴遷移を開始したり観測したりするための多くのメソッドを統合しています。また、<a href>のクリックや<form action>の送信といった「意味的なナビゲーション」をintercept()でフックし、カスタム動作を提供する仕組みがある 将来のWebアプリにしか対応できない（History APIのものは使えなくなる）
あるいは 既存のアプリがルーティングライブラリを全面的に書き換える必要がある
といった問題が生じる
これは「大規模に計測できるようにする」という本来の目的に反する
関連情報